<template>
  <div>
    <!-- 富文本 -->
    <quill-editor
      v-model="content"
      @blur="onBlur"
      @input="onBlur"
      :options="editorOption"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  props: ['value'],
  model: {
    prop: 'value', // props接受的变量名称
    event: 'change' // 定义一个方法
  },
  watch: {
    value: function (newval) {
      // console.log(newval)
      this.content = newval
    }
  },
  data () {
    return {
      content: '',
      // 自定义富文本
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      }
    }
  },

  created () {},

  methods: {
    // 失去焦点去除标签
    onBlur () {
      console.log(1)
      // console.log(this.content.replace(/<\/?.+?>/g, ''))
      // const res = this.content.replace(/<\/?.+?>/g, '')
      this.$emit('change', this.content)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .ql-editor {
  height: 200px;
}
</style>
